<template>
  <div class="table-main-box">
    <el-table
      :data="tableData"
      row-key="id"
      border
      style="width: 100%"
      height="100%"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
    >
      <el-table-column align="center" type="index" width="60px" label="编号"  />
        <el-table-column align="center" prop="dickey" label="key"  />
      <el-table-column
        align="center"
        prop="dicvalue"
        label="字典名称"
      />
      <el-table-column
        align="center"
        prop="typename"
        label="类型"
      />
      <el-table-column align="center" width="160" label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="updateItem(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteDictionaryApi } from '@/api/index.js'
export default {
  props: {
    tableData: {
      type: Array,
      default: null
    },
    openUpdate: {
      type: Function,
      default: null
    },
    getDictionaryList: {
      type: Function,
      default: undefined
    }
  },
  data () {
    return {
      tableStyle: {
        background: 'none',
        width: '150px'
      },
      headerStyle: {
        color: 'black',
        fontSize: '16px'
      },
      openInfo: true
    }
  },
  mounted () {},
  methods: {
    // 编辑某项
    updateItem (row) {
      this.openInfo = false
      this.openUpdate(row)
      // this.setOpenInfo()
    },
    //  删除某项
    deleteItem (row) {
      
      this.openInfo = false
      this.$confirm('此操作将永久删除该记录, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除某项aaa----->', row)
        deleteDictionaryApi({ guid: row.guid }).then(res => {
          console.log('删除某项bbb----->', row)
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDictionaryList()
          }
        }).catch(() => {
          console.log('删除某项ccc----->', row)
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" >
.table-main-box {
  /* border: 1px solid red; */
  height: 75vh;
}
.el-table {
  /* border: 1px solid red; */

  /* background: #f5f6fa; */
}
.has-gutter > tr > :last-child {
  /* background: red; */
}
.el-popover {
  height: 10px;
  color: #fff;
  line-height: 10px;
  background: #000;
}
.el-table__row:hover {
  cursor: pointer;
}
.el-table__body-wrapper {
  overflow-y: scroll;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: fade(rgb(78 182 214), 60%);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  opacity: 0.2;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  background: fade(rgb(78 182 214), 30%);
  border-radius: 0;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
}
.el-table__body tr.current-row > td {
  background-color: #d0d3d0 !important;
}
</style>